<template>
  <div class="content-wraps">
    <div class="containers bz_container" id="List">
      <!-- banner -->
      <div class="fiat">
        <div class="to_business">
          <h3>{{ $t('otc.title') }}</h3>
          <span>{{ $t('otc.desc') }}</span>
          <a href="javascript:void(0)" @click="goBusiness">{{ $t('otc.buttontxt') }}</a>
        </div>
      </div>
      <!-- table -->
      <div class="content">
        <Menu
          ref="navMenu"
          mode="horizontal"
          width="auto"
          :active-name="activeMenuName"
          @on-select="menuSelected"
          class="tradelist"
        >
          <MenuGroup>
            <template v-for="(coin, index) in coins">
              <MenuItem :name="'coin-' + index" :key="index"> {{ coin.unit }} </MenuItem>
            </template>
          </MenuGroup>
        </Menu>
        <router-view></router-view>
      </div>
      <!-- product -->
      <div class="advantage">
        <ul>
          <li>
            <img src="../../assets/images/price.png" alt="" />
            <div class="title">{{ $t('otc.title1') }}</div>
            <div class="content1">{{ $t('otc.desc1') }}</div>
          </li>
          <li>
            <img src="../../assets/images/poundage.png" alt="" />
            <div class="title">{{ $t('otc.title2') }}</div>
            <div class="content1">{{ $t('otc.desc2') }}</div>
          </li>

          <li>
            <img src="../../assets/images/instant.png" alt="" />
            <div class="title">{{ $t('otc.title3') }}</div>
            <div class="content1">{{ $t('otc.desc3') }}</div>
          </li>
          <li>
            <img src="../../assets/images/platedanbao.png" alt="" />
            <div class="title">{{ $t('otc.title4') }}</div>
            <div class="content1">{{ $t('otc.desc4') }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url('../../assets/css/common.scss');
.content-wraps {
  padding-top: 60px;
  .containers {
    margin: 20px auto;
    // banner
    .fiat {
      border-radius: 5px;
      background: url('../../assets/images/otc_bg.jpg') no-repeat center;
      background-size: 100% 100%;
      display: flex; //flex布局
      justify-content: center; //使子项目水平居中
      align-items: center; //使子项目垂直居中
      padding: 50px 0;
      .to_business {
        color: #fff;
        text-align: center;
        h3 {
          font-size: 46px;
          letter-spacing: 20px;
        }
        span {
          font-size: 20px;
          letter-spacing: 10px;
          display: block;
        }
        a {
          width: 220px;
          height: 45px;
          display: inline-block;
          background: #ffa400;
          border-radius: 5px;
          font-size: 20px;
          line-height: 45px;
          color: #000;
          margin-top: 20px;
        }
      }
    }
    .content {
      width: 100%;
      margin: 20px auto;
      background-color: #192330;
      border-radius: 4px;
    }
    // product
    .advantage {
      background-color: #192330;
      border-radius: 4px;
      ul {
        display: flex;
        padding: 30px;
        li {
          width: 25%;
          list-style-type: none;
          text-align: center;
          padding: 10px;
          img {
            width: 30px;
            height: 30px;
            display: block;
            margin: 10px auto;
          }
          div.title {
            font-size: 16px;
            color: #fff;
          }
          div.content1 {
            padding: 10px;
            line-height: 20px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .content-wraps {
    padding-top: 34px;
    .containers {
      margin: 10px auto;
      padding: 0;
      .fiat {
        padding: 30px 0;
        .to_business {
          h3 {
            font-size: 22px;
            letter-spacing: 10px;
          }
          span {
            font-size: 14px;
            letter-spacing: 2px;
            display: block;
          }
          a {
            width: 140px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: #000;
            margin-top: 20px;
          }
        }
      }
      .content {
        margin: 10px 0;
      }
      .advantage {
        background-color: #192330;
        border-radius: 4px;
        ul {
          flex-wrap: wrap;
          padding: 10px 0;
          li {
            width: 50%;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.content-wraps {
  .containers {
    .content {
      ul.tradelist.ivu-menu.ivu-menu-light.ivu-menu-horizontal {
        background-color: #192330;
        border-radius: 4px;
        &:after {
          background: none;
        }
        .ivu-menu-item-group {
          li.ivu-menu-item {
            border: none;
            &:hover {
              color: #f0ac19;
              border-bottom: 0;
            }
          }
          li.ivu-menu-item.ivu-menu-item-active.ivu-menu-item-selected {
            color: #f0ac19;
            border-bottom: none;
          }
        }
      }
      .nav-right.tradeCenter .list-content .ivu-tabs .ivu-tabs-tabpane {
        .ivu-table-wrapper {
          .ivu-spin.ivu-spin-large.ivu-spin-fix {
            border-color: #fff;
          }
        }
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      coins: [],
      activeMenuName: 'coin-1',
    }
  },
  computed: {
    isLogin: function() {
      return this.$store.getters.isLogin
    },
  },
  watch: {
    $route(to, from) {
      this.activeMenu()
    },
  },
  methods: {
    init() {
      this.$store.commit('navigate', 'nav-otc')
      this.$http.post(this.host + this.api.otc.coin).then(response => {
        if (response.body.code == 0) {
          this.coins = response.body.data
          this.activeMenu()
          this.$nextTick(function() {
            this.$refs.navMenu.updateActiveName()
          })
        }
      })
    },
    goBusiness() {
      if (this.isLogin) {
        this.$router.push({
          path: '/identbusiness',
        })
      } else {
        this.$Message.warning('请先登录')
      }
    },
    menuSelected(menuName) {
      if (menuName.startsWith('coin')) {
        var coin = this.coins[menuName.split('-')[1]]
        this.$router.push({ path: '/otc/trade/' + coin.unit, query: { unit: coin.unit } })
      } else {
        this.$router.push('/otc/' + menuName)
      }
    },
    activeMenu() {
      let coin = this.$route.params[0] || 'USDT'
      coin = coin.toUpperCase()
      let index = 0
      this.coins.forEach((v, i) => {
        if (v.unit === coin) {
          index = i
        }
      })
      this.activeMenuName = `coin-${index}`
      this.$nextTick(function() {
        this.$refs.navMenu.updateActiveName()
      })
    },
  },
  created: function() {
    this.init()
    // this.activeMenuName = "coin-1";
    // this.$nextTick(function() {
    //   this.$refs.navMenu.updateActiveName();
    // });
  },
}
</script>
